<template>
	<div id="sys-cache">
		<div class="description">
			<el-descriptions class="margin-top" title="Redis数据" :column="5" border>
				<template slot="extra">
					<el-button type="primary" size="small" @click="clearRedisCache">重置缓存</el-button>
				</template>
				<el-descriptions-item label="Redis版本">{{data.redis_version}}</el-descriptions-item>
				<el-descriptions-item label="角色">{{data.role}}</el-descriptions-item>
				<el-descriptions-item label="进程id">{{data.process_id}}</el-descriptions-item>
				<el-descriptions-item label="运行时间">{{data.uptime_in_seconds | formatSeconds}}</el-descriptions-item>
				<el-descriptions-item label="客户端数量">{{data.connected_clients}}</el-descriptions-item>
				<el-descriptions-item label="数据内存">{{(data.used_memory/1024).toFixed(2)}}KB</el-descriptions-item>
				<el-descriptions-item label="过期的key">{{data.expired_keys}}</el-descriptions-item>
				<el-descriptions-item label="删除的key">{{data.evicted_keys}}</el-descriptions-item>
				<el-descriptions-item label="命中的key">{{data.keyspace_hits}}</el-descriptions-item>
				<el-descriptions-item label="没命中的key">{{data.keyspace_misses}}</el-descriptions-item>
				<el-descriptions-item label="内存占用率">{{(data.used_memory*100/data.used_memory_peak).toFixed(2)}}%
				</el-descriptions-item>
				<el-descriptions-item label="内存空间">{{(data.used_memory_peak/1024/1024).toFixed(2)}}MB
				</el-descriptions-item>
				<el-descriptions-item label="db0">{{data.db0}}</el-descriptions-item>
				<el-descriptions-item label="配置文件">{{data.config_file}}</el-descriptions-item>
			</el-descriptions>
		</div>
		<el-table :data="arr" style="width: 100%" border height="400">
			<el-table-column prop="key" label="key" align="center">
			</el-table-column>
			<el-table-column label="过期时间" align="center" width="100">
				<template slot-scope="scope">
					<span>{{scope.row.expire | formatSeconds}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="type" label="类型" width="100" align="center">
			</el-table-column>
			<el-table-column prop="size" label="大小" width="120" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.size | formatSize}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="100" align="center">
				<template slot-scope="scope">
					<el-button size="mini" type="danger" @click="deleteRedisCache(scope.row.key)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="box1">
			<div class="filter-box">
				<el-input size="mini" placeholder="keys" v-model="filter"></el-input>
				<el-button @click="getData(pager.pageNum,pager.pageSize)" size="mini">刷新</el-button>
			</div>
			<pagination v-model="pager" @change="getData"></pagination>
		</div>
	</div>
</template>

<script>
	import {$get,$post} from '@/puigins/request.js'
	import {
		formatSeconds
	} from '@/utils/index.js'
	import pagination from '@/components/common/Pagination.vue'
	export default {
		name: 'SystemCache',
		methods: {
			clearRedisCache() {
				this.$confirm('确定删除缓存?建议只在开发环境中使用此功能', '警告', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					$post("/admin/manage/system/clearRedisCache").then(res => {
						console.log(res)
						if (res.code == 200) {
							this.$message.success(res.data)
						} else {
							this.$message.error(res.data)
						}
					})
				}).catch(() => {});
			},
			getData(page, pageSize) {
				$get("/admin/manage/system/getRedisData",{page,pageSize,filter:this.filter}).then(res => {
					if (res.code == 200) {
						this.arr = res.data.list
						this.pager = res.data
					} else {
						console.log(res)
						this.$message.error(res.data)
					}
				})
			},
			deleteRedisCache(key) {
				$get("/admin/manage/system/deleteRedisCache",{key}).then(res => {
					if (res.code == 200) {
						this.$message.success(res.data)
						this.getData(this.pager.pageNum, this.pager.pageSize)
					} else {
						console.log(res)
						this.$message.error(res.data)
					}
				})
			}
		},
		created() {
			this.getData(1, 8)
			$get("/admin/manage/system/getRedisInfo").then(res => {
				console.log(res.data)
				if (res.code == 200) {
					this.data = res.data
					this.data.config_file = JSON.stringify(res.data.config_file).replaceAll('"', '')
				} else {
					this.$message.error(res.data)
				}
			})
		},
		data() {
			return {
				data: {},
				arr: [],
				pager: {},
				filter: '*'
			}
		},
		filters: {
			formatSeconds(s) {
				if (s == -1) return "永久"
				return formatSeconds(s)
			},
			formatSize(size) {
				if (size < 1000) return "<1K"
				return Math.ceil(size / 1000) + "K"
			}
		},
		components: {
			pagination
		}
	}
</script>

<style lang="scss">
	#sys-cache {
		padding: 30px;

		.box1 {
			display: flex;
			align-items: center;
			gap: 30px;

			.filter-box {
				margin-top: 20px;
				display: flex;
				gap: 10px;
			}
		}
	}
</style>
